<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css">
    <script src="../js/cookie.js"></script>
    <style>
        .input-group {
            margin-top: 10px;
        }

        .right {
            font-size: 12px;
            color: green;
        }

        .error {
            font-size: 12px;
            color: red;
        }
    </style>
</head>

<body>
    <form action="" onsubmit="return false">
        <div class="input-group">
            <labal>用户名:</labal>
            <input type="text" class="user" name="user">
            <span class="user_tips"></span>
        </div>
        <div class="input-group">
            <labal>密&emsp;码:</labal>
            <input type="password" class="pwd" name="pwd">
            <span class="pwd_tips"></span>
        </div>
        <div class="input-group">
            <labal>手机号:</labal>
            <input type="text" class="phone" name="phone">
            <span class="phone_tips"></span>
        </div>
        <div class="input-group">
            <labal>邮&emsp;箱:</labal>
            <input type="text" class="email" name="email">
            <span class="email_tips"></span>
        </div>
        <div class="input-group">
            <input type="submit" class="submit" value="注册">
            <input type="reset" class="reset" value="取消">
        </div>
    </form>
</body>

<script>
    // 用户名
    // 由数字 字母 下划线 $ 组成, 6-12位,且不能以数字开头
    // (1) 一步到位
    // (2)  拆分成三个规则
    //  6-12位
    //  不能以数字开头
    //  由数字 字母 下划线 $ 组成

    // 密码：
    //  由数字 字母 下划线 $ 组成, 6-12位，密码强度

    // 手机号
    // 纯数字 11位   以1开头  第二位3-9

    // 邮箱

    // 用户名 密码 手机号 邮箱 格式全都正确 => 跳转百度



    var form = document.getElementsByTagName("form")[0];
    var { user: userInp, pwd: pwdInp, phone: phoneInp, email: emailInp } = document.getElementsByTagName("form")[0];
    console.log(userInp, pwdInp, phoneInp, emailInp);

    var subBtn = document.getElementsByClassName("submit")[0];

    // 全局变量 记录验证的结果
    var isUserOk = false;
    var isPwdOk = false;
    var isPhoneOk = false;
    var isEmailOk = false;

    // 一步到位
    /*  userInp.onblur = function () {
         var user = userInp.value;
 
         // 去除所有空格
         user = user.replace(/\s/g, "");
         userInp.value = user;
 
         var reg = /^[a-zA-Z_$][\w$]{5,11}$/;
         var tipsSpan = this.nextElementSibling;
         if (reg.test(user)) {
             tipsSpan.textContent = "√";
             tipsSpan.className = "user_tips right";
         } else {
             tipsSpan.textContent = "用户名由数字、字母、下划线、$组成,6-12位,且不能以数字开头";
             tipsSpan.className = "user_tips error";
         }
 
     } */

    // 拆分版 => 拆分成三个规则
    //  6-12位
    //  不能以数字开头
    //  由数字 字母 下划线 $ 组成  => 所有的字符都符合这个规则 / 存在不符合规则的字符(找一个)
    userInp.onchange = function () {
        isUserOk = false;  //每次失焦 重新验证 => 重置为false

        var user = userInp.value;

        // 去除所有空格
        user = user.replace(/\s/g, "");
        userInp.value = user;

        var tipsSpan = this.nextElementSibling;

        var lReg = /^.{6,12}$/; //任意字符 6-12
        var sReg = /^[^0-9]/; //非数字开头
        var zReg = /[^\w$]/; // 存在非法字符

        // 排除所有的错误 => 剩余的就是对的
        if (!lReg.test(user)) { // 长度有误   lReg.test(user) ===false
            tipsSpan.textContent = "用户名需要在6-12位之间";
            tipsSpan.className = "user_tips error";
        } else if (!sReg.test(user)) { // 开头有问题 => 数字开头  sReg.test(user) === false
            tipsSpan.textContent = "用户名不能以数字开头";
            tipsSpan.className = "user_tips error";
        } else if (zReg.test(user)) { // 存在非法字符 zReg.test(user) === true 
            tipsSpan.textContent = "用户名由数字、字母、下划线、$组成";
            tipsSpan.className = "user_tips error";
        } else {

            var xhr = new XMLHttpRequest();

            xhr.open("get", "http://43.138.81.225/demo/php/isExistUser.php?user=" + user, true);

            xhr.send();

            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    var result = xhr.responseText;
                    result = JSON.parse(result);
                    console.log(result);
                    var { status, message } = result;
                    if (status) {
                        tipsSpan.textContent = "√";
                        tipsSpan.className = "user_tips right";
                        isUserOk = true;
                    } else {
                        tipsSpan.textContent = "用户名已注册";
                        tipsSpan.className = "user_tips error";
                    }

                }
            }




        }

    }


    pwdInp.onblur = function () {
        isPwdOk = false;
        var pwd = pwdInp.value;

        // 去除所有空格
        pwd = pwd.replace(/\s/g, "");
        pwdInp.value = pwd;

        var reg = /^[\w$]{6,12}$/;
        var tipsSpan = this.nextElementSibling;
        if (reg.test(pwd)) {

            // 关于密码强度
            // 数字 大写字母 小写字母 _$ 四者  
            // 出现1种   1123123   asdasd   SDSDFFD  _______   弱
            // 出现2种   1123aaaa  1123AAAA  aaaaAAAA          中
            // 出现3种   1123aaaa  1123AAAA  aaaaAAAA          强
            // 出现4种   1123aaaa  1123AAAA  aaaaAAAA          超强

            var isExistNum = /[0-9]/.test(pwd);
            var isExistBig = /[A-Z]/.test(pwd);
            var isExistSmall = /[a-z]/.test(pwd);
            var isExistSpe = /[_$]/.test(pwd);

            var level = isExistNum + isExistBig + isExistSmall + isExistSpe;
            console.log(level);

            switch (level) {
                case 1:
                    tipsSpan.textContent = "密码强度:弱";
                    break;
                case 2:
                    tipsSpan.textContent = "密码强度:中";
                    break;
                case 3:
                    tipsSpan.textContent = "密码强度:强";
                    break;
                case 4:
                    tipsSpan.textContent = "密码强度:超强";
                    break;
            }
            tipsSpan.className = "pwd_tips right";
            isPwdOk = true;
        } else {
            tipsSpan.textContent = "密码由数字、字母、下划线、$组成,6-12位";
            tipsSpan.className = "pwd_tips error";
        }

    }

    phoneInp.onblur = function () {
        isPhoneOk = false;
        var phone = phoneInp.value;

        // 去除所有空格
        phone = phone.replace(/\s/g, "");
        phoneInp.value = phone;

        var reg = /^1[3-9]\d{9}$/;
        var tipsSpan = this.nextElementSibling;
        if (reg.test(phone)) {


            var xhr = new XMLHttpRequest();

            xhr.open("get", "http://43.138.81.225/demo/php/isExistPhone.php?phone=" + phone, true);

            xhr.send();

            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    var result = xhr.responseText;
                    result = JSON.parse(result);
                    console.log(result);
                    var { status, message } = result;
                    if (status) {
                        tipsSpan.textContent = "√";
                        tipsSpan.className = "phone_tips right";
                        isPhoneOk = true;
                    } else {
                        tipsSpan.textContent = "手机号已注册";
                        tipsSpan.className = "phone_tips error";
                    }

                }
            }



        } else {
            tipsSpan.textContent = "请输入正确的手机号";
            tipsSpan.className = "phone_tips error";
        }

    }

    emailInp.onblur = function () {
        isEmailOk = false;
        var email = emailInp.value;

        // 去除所有空格
        email = email.replace(/\s/g, "");
        emailInp.value = email;

        var reg = /^\w+@\w+\.\w+$/;
        var tipsSpan = this.nextElementSibling;
        if (reg.test(email)) {

            var xhr = new XMLHttpRequest();

            xhr.open("get", "http://43.138.81.225/demo/php/isExistEmail.php?email=" + email, true);

            xhr.send();

            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    var result = xhr.responseText;
                    result = JSON.parse(result);
                    console.log(result);
                    var { status, message } = result;
                    if (status) {
                        tipsSpan.textContent = "√";
                        tipsSpan.className = "email_tips right";
                        isEmailOk = true;
                    } else {
                        tipsSpan.textContent = "邮箱已注册";
                        tipsSpan.className = "email_tips error";
                    }

                }
            }


        } else {
            tipsSpan.textContent = "邮箱格式有误";
            tipsSpan.className = "email_tips error";
        }

    }


    subBtn.onclick = function () {
        if (isUserOk && isPwdOk && isPhoneOk && isEmailOk) {
            // alert("可以注册");

            var user = userInp.value;
            var pwd = pwdInp.value;
            var phone = phoneInp.value;
            var email = emailInp.value;


            var xhr = new XMLHttpRequest();

            xhr.open("post", "http://43.138.81.225/demo/php/register.php", true);

            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
            xhr.send(`user=${user}&pwd=${pwd}&phone=${phone}&email=${email}`);

            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    var result = xhr.responseText;
                    result = JSON.parse(result);
                    console.log(result);
                    var { status, message } = result;
                    if (status) {
                        location.href = "./login.html";
                    } else {
                        alert(message);
                    }

                }
            }

        } else {
            alert("请填入完整信息");
        }
    }



</script>

</html>